<template>
  <div class="permission">
    <div class="operate">
      <div>
        <div style="flex: 0 0 auto">
          <ep-search
              v-model="queryParam.h0116"
              :size="size"
              placeholder="请输入执法单位"
              enter-button="chaxun"
              @search="
              () => {
                this.findList();
              }
            "
          ></ep-search>
        </div>
        <a-tree-select
            placeholder="请选择区划"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:16vw"
            v-model="queryParam.b0122List"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="findList()"
            :size="size"
        />
        <!-- <zh-input prop="b0122"  :size="size" :options="dictData.XZQH"  type="select"  placeholder="区划" v-model="queryParam.b0122" 
            style="width:200px;margin-left: 15px"></zh-input> -->
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="refresh.svg"
            @click="
            () => {
              this.flushPage();
            }
          "
        ></ep-button>
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="add.svg"
            @click="
            () => {
              this.addCase();
            }
          "
        >新增
        </ep-button
        >
      </div>

      <div>
        <column-manage :column.sync="tableColumn" @change="columnChange"></column-manage>
<!--        <ep-button-->
<!--            :size="size"-->
<!--            style="margin-left: 15px"-->
<!--            icon="export.svg"-->
<!--            @click="-->
<!--            () => {-->
<!--              this.exportExcel();-->
<!--            }-->
<!--          "-->
<!--        >导入-->
<!--        </ep-button>-->
        <ep-button
            :size="size"
            style="margin-left: 15px"
            icon="export.svg"
            @click="
            () => {
              this.exportExcel();
            }
          "
        >导出
        </ep-button
        >
      </div>
    </div>

    <a-modal
        :title="modalTitle"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="visible"
        cancelText="关闭"
        okText="保存"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <zh-row :span="24" :gutter="[16,16]">
        <zh-col>
          <zh-card title="案件信息">
            <zh-form ref="formInfo" :model="formInfo" labelAlign="right">
              <zh-input prop="b0122" label="区划" :options="dictData.XZQH" type="select" placeholder="区划"
                        v-model="formInfo.b0122"></zh-input>
              <zh-input prop="h0104" label="案件状态" :options="dictData.h0104" type="select" placeholder="案件状态"
                        v-model="formInfo.h0104"></zh-input>
              <zh-input prop="h0105" label="立案时间" type="date" placeholder="立案时间" v-model="formInfo.h0105"></zh-input>
              <zh-input prop="h0106" label="案件类型" :options="dictData.H0106" type="select" placeholder="案件类型"
                        v-model="formInfo.h0106"></zh-input>
              <zh-input prop="h0107" label="当事人" placeholder="当事人" v-model="formInfo.h0107"></zh-input>
              <zh-input prop="h0110" label="案件来源" :options="dictData.h0110" type="select" placeholder="案件来源"
                        v-model="formInfo.h0110"></zh-input>
              <zh-input prop="h0112" label="执行完成日期" type="date" placeholder="执行完成日期"
                        v-model="formInfo.h0112"></zh-input>
              <zh-input prop="h0116" label="办理单位" placeholder="办理单位" v-model="formInfo.h0116"></zh-input>
              <zh-input label="点位名称" show-search :labelInValue="true" :filter-option="false"
                        :not-found-content="fetching ? undefined : null"
                        :defaultFields="{label: 'b0102',value: 'b0101'}" type="select" placeholder="请输入点位名称"
                        v-model="b01"
                        :options="b01DataList"
                        @search="handleSearch"
                        @change="handleChange">
                <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
              </zh-input>
              <zh-input prop="h0119" label="案件名称" placeholder="案件名称" v-model="formInfo.h0119"></zh-input>
              <!--                <a-select-->
              <!--                    show-search-->
              <!--                    :value="b01"-->
              <!--                    :labelInValue="true"-->
              <!--                    placeholder="请输入点位名称"-->
              <!--                    style="width: 200px"-->
              <!--                    :default-active-first-option="false"-->
              <!--                    :show-arrow="false"-->
              <!--                    :filter-option="false"-->
              <!--                    :not-found-content="fetching ? undefined : null"-->
              <!--                    @search="handleSearch"-->
              <!--                    @change="handleChange"-->
              <!--                >-->
              <!--                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />-->
              <!--                  <a-select-option v-for="(item,index) in b01DataList" :key="item.b0101">-->
              <!--                    {{ item.b0102 }}-->
              <!--                  </a-select-option>-->
              <!--                </a-select>-->
              <zh-input :span="24" prop="h0108" label="当事人地址" :labelCol="labelCol" :wrapperCol="wrapperCol"
                        placeholder="当事人地址" v-model="formInfo.h0108"></zh-input>
              <zh-input :span="24" :rows="2" type="textarea" prop="h0109" label="主要案情" :labelCol="labelCol"
                        :wrapperCol="wrapperCol" placeholder="主要案情" v-model="formInfo.h0109"></zh-input>
              <zh-input :span="24" :rows="2" type="textarea" prop="h0111" label="具体案情" :labelCol="labelCol"
                        :wrapperCol="wrapperCol" ref="" placeholder="具体案情" v-model="formInfo.h0111"></zh-input>
              <zh-input :span="24" :rows="2" type="textarea" prop="h0113" label="未执行处罚决定原因" :labelCol="labelCol"
                        :wrapperCol="wrapperCol" placeholder="未执行处罚决定原因" v-model="formInfo.h0113"></zh-input>
              <zh-input :span="24" :rows="2" type="textarea" prop="h0114" label="处罚结果" :labelCol="labelCol"
                        :wrapperCol="wrapperCol" placeholder="处罚结果" v-model="formInfo.h0114"></zh-input>
            </zh-form>
          </zh-card>
          <zh-card title="节点信息">
            <ep-button style="margin:15px" @click="addNode()">新增节点</ep-button>
            <zh-form
                ref="nodeInfo"
                :model="nodeInfo"
                v-for="(item, index) in this.nodeList"
                :key="index"
            >
              <zh-input
                  v-if="item.h1102"
                  disabled
                  :value="item.h1102"
                  :key="index"
                  prop="b0122" :label="'节点'+(index+1)"
                  v-model="item.h1102">
              </zh-input>
              <a-form-model-item v-else :label="'节点'+(index+1)">
                <a-cascader
                    :options="options"
                    :load-data="loadData"
                    placeholder="请选择"
                    change-on-select
                    @change="(value,selectedOptions) => onChange(value,selectedOptions,item)"
                />
              </a-form-model-item>
              <a icon="update" v-if="item.h1102" style="margin:7px" @click="()=> {
                  item.editFlag = true;
                  const data = JSON.parse(JSON.stringify(item))
                  $set(nodeList,index,data)
                }">修改</a>
              <a icon="delete" style="margin:7px" @click="rmNode(index)">删除</a>

              <a-cascader
                  style="width: 25%"
                  v-if="item.editFlag"
                  :options="options"
                  :load-data="loadData"
                  placeholder="请选择"
                  change-on-select
                  @change="(value,selectedOptions) => onChange(value,selectedOptions,item)"
              />
            </zh-form>
          </zh-card>
        </zh-col>
      </zh-row>
    </a-modal>

    <a-modal
        :title="modalTitle"
        centered
        style="margin-top:100px;"
        width="65%"
        height="80%"
        destroyOnClose
        v-model="visible1"
        :footer="null"
    >
      <zh-row :span="24" :gutter="[16,16]">
        <zh-col>
          <zh-form :disabled="true" v-if="this.nodeList.length > 0" ref="nodeInfo" :model="nodeInfo" labelAlign="right">
            <zh-input
                v-for="(item, index) in this.nodeList"
                :value="item.h1102"
                :key="index"
                prop="b0122" :label="'节点'+index"
                v-model="item.h1102"></zh-input>
          </zh-form>
          <zh-form v-else ref="nodeInfo" :model="nodeInfo" labelAlign="right">
            <div>暂无流程环节</div>
          </zh-form>
        </zh-col>
      </zh-row>
    </a-modal>

    <div class="ep-table">
      <zh-table
          ref="tableList"
          style="width: 100%"
          :data="tableData"
          height="auto"
          rowId="roleId"
          type="paging"
          :url="tableUrl"
          :columns="tableColumn"
      >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button @click="link(row)"> 流转环节</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="view(row)"> 查看</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="edit(row)">编辑</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="del(row)">删除</ep-button>
            </span>
            <span class="alert-message-content" style="margin-left: 20px;">
              <ep-button @click="remind(row)">提醒</ep-button>
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>

<script>
import modal from "ant-design-vue/es/modal";
import {
  getIllegalCasesList,
  saveIllegalCases,
  delIllegalCases,
  updateIllegalCases,
  getNodeList,
  getPermissionParams,
  remind, getOrgOrUserInZzdForLocal, getUserDetailInfoInZzd
} from "@/services/system/whdngxlApi";
import ZhTable from "@/components/zh-table/ZhTable";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import {getBatchDict} from "@/services/system/api";
import ColumnManage from "@/components/assembly/columnManage";
import {mapGetters} from "vuex";
import {TreeSelect} from "ant-design-vue";
import {isEmptyStr} from '@/utils/util';
import {
  getB01DataList
} from "@/services/system/whdngxlApi";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";

let timeout;
let currentValue;
export default {
  name: "PatrolTaskConfig",
  components: {
    ZhTable,
    ColumnManage
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      dictData: {
        h0110: [],
        h0106: [],
        h0104: [],
      },
      modalTitle: '',
      labelCol: {sm: {span: 2}, md: {span: 2}, xs: {span: 24}, lg: {span: 2}, xl: {span: 2}, xxl: {span: 2}},
      wrapperCol: {sm: {span: 22}, md: {span: 22}, xs: {span: 24}, lg: {span: 22}, xl: {span: 22}, xxl: {span: 22}},
      queryParam: {
        h0116: '',
        b0122List: []
      },
      filtersData: {},
      nodeInfo: {},
      formInfo: {},
      tableColumn: [
        // { type: "checkbox", width: 50, fixed: "left", visible: true },
        {type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号', visible: true,},
        {
          field: "b0122Name", title: "区划", align: "center", width: 100, visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterB0122Method,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {field: "h0116", title: "执法单位", align: "center", width: 200, visible: true,
          filters: [{ data: "" }],
          filterMethod: this.filterH0116Method,
          slots: {
            // 使用插槽模板渲染
            filter: "filter",
          },
        },
        {field: "h0104Name", title: "案件状态", align: "center", width: 150, visible: true, filters: [],},
        {field: "h0105", title: "立案时间", align: "center", width: 150, visible: true, sortable: true},
        {field: "h0106Name", title: "案件类型", align: "center", width: 150, visible: true, filters: [],},
        {field: "h0107", title: "当事人", align: "center", width: 150, visible: true,},
        {field: "h0110Name", title: "案件来源", align: "center", width: 150, visible: true, filters: [],},
        {field: "h0117", title: "处置时长", align: "center", width: 150, visible: true, sortable: true},
        {field: "h0114", title: "处罚情况", align: "center", width: 150, visible: true,},
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          width: 430,
          slots: {default: "operate",},
          visible: true,
        },
      ],
      tableData: [],
      visible: false,
      visible1: false,
      loading: false,
      tableUrl: getIllegalCasesList,
      nodeList: [],
      taskAreaTree: [],
      SHOW_PARENT,
      fetching: false,
      b01DataList: [],
      b01: undefined,
      options: [],
      h1101List: []
    };
  },
  created() {
    const param = {}
    param.dictFields = 'h0104,H0106,h0110,XZQH'
    this.$http.post(getBatchDict, param).then(res => {
      this.dictData = res.result
      //获取筛选数据
      UnmovableRelics.methods.getFiltersData(this, "tableList");
      console.log(this.filtersData)
    })
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });

    this.$http.post(getOrgOrUserInZzdForLocal, {searchOrg: true}).then(res => {
      this.options = res.result
      this.options.forEach(item => {
        item.isLeaf = item.leaf
      })
    })
  },
  mounted() {
    this.findList()
  },
  methods: {
    loadData(selectedOptions) {
      console.log(selectedOptions)
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      this.$http.post(getOrgOrUserInZzdForLocal, {
        searchOrg: targetOption.searchOrg,
        searchUser: targetOption.searchUser, organizationCode: targetOption.organizationCode
      }).then(res => {
        const list = res.result
        list.forEach(item => {
          item.isLeaf = item.leaf
        })
        targetOption.loading = false;
        targetOption.children = list;
        this.options = [...this.options];
      })
    },
    onChange(value, selectedOptions, item) {
      const lastItem = value[value.length - 1]
      if (lastItem.indexOf('GE_') > -1) {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        item.employeeCode = targetOption.employeeCode
        item.h1102 = targetOption.employeeName
      }
    },
    fetch(value, callback) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      currentValue = value;

      function fake(that) {
        that.fetching = true
        if (value) {
          that.$http.post(getB01DataList, {b0102: value, b0122: that.formInfo.b0122}).then(res => {
            console.log(res)
            callback(res.result);
          }).catch((error) => {
            console.log(JSON.stringify(error))
          }).finally(() => {
            that.fetching = false
          })
        }
      }

      timeout = setTimeout(fake(this), 300);
    },
    handleSearch(value) {
      this.fetch(value, data => (this.b01DataList = data));
    },
    handleChange(option) {
      console.log(option);
      this.b01 = option
    },
    handleOk() {
      if (this.formInfo.h0101) {
        const param = this.formInfo
        param.b0101 = this.b01.key
        param.b0102 = this.b01.label
        param.nodeList = this.nodeList
        param.h1101List = this.h1101List
        this.$http.post(updateIllegalCases, param).then(res => {
          if (res.code === 0) {
            modal.info({title: '成功提示', content: '修改成功'});
            this.findList()
          } else {
            modal.info({title: '失败提示', content: '修改失败'});
          }
          this.visible = false
        })
      } else {
        const params = this.formInfo
        params.b0101 = this.b01.key
        params.b0102 = this.b01.label
        params.nodeList = this.nodeList
        this.$http.post(saveIllegalCases, params).then(res => {
          if (res.code === 0) {
            modal.info({title: '成功提示', content: '保存成功'});
            this.findList()
          } else {
            modal.info({title: '失败提示', content: '保存失败'});
          }
          this.visible = false
        })
        console.log(this.nodeList)
        debugger
      }
    },
    handleCancel() {
      this.visible = false;
    },
    addAndOpen() {
      this.$nextTick(() => {
        this.$refs.illegalCaseForm.taskSave(2);
      });
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    findList() {
      if (!isEmptyStr(this.queryParam.b0122List)) {
        this.queryParam.b0122 = this.queryParam.b0122List[0]
      }
      this.$refs.tableList.query(this.queryParam)
    },
    addCase() {
      this.modalTitle = '新增'
      this.formInfo = {}
      this.showOrHide();
      this.nodeList = []
    },
    del(row) {
      modal.confirm({
        title: "确认删除该违法案件吗？",
        onOk: () => {
          const params = row;
          this.$loading.show("正在处理数据,请等待...");
          setTimeout(() => {
            this.$http
                .post(delIllegalCases, params)
                .then((res) => {
                  this.$message.info("删除成功");
                  this.$loading.hide();
                  this.findList()
                })
                .catch((error) => {
                  console.log(JSON.stringify(error));
                  this.$loading.hide();
                })
                .finally(() => {
                });
          }, 50);
        },
        onCancel: () => {
        },
      });
    },
    exportExcel() {
      this.$refs.tableList.exportData("违法案件管理", 'xls')
    },
    flushPage() {
      this.queryParam = {}
      this.findList();
    },
    //查看
    view(row) {
      this.modalTitle = '查看案件信息'
      this.showOrHide();
      this.getNodeList(row);
      this.formInfo = row
      this.b01DataList = [{b0101: row.b0101, b0102: row.b0102}]
      this.b01 = {key: row.b0101, label: row.b0102}
    },
    link(row) {
      this.modalTitle = '查看流转环节'
      this.getNodeList(row);
      this.visible1 = true
    },
    addNode() {
      this.nodeList.push({})
    },
    rmNode(index) {
      if (this.nodeList[index].h1101) {
        this.h1101List.push(this.nodeList[index].h1101)
      }
      this.nodeList.pop(index)
    },
    getNodeList(row) {
      const params = {}
      params.h0101 = row.h0101
      this.$http
          .post(getNodeList, params)
          .then((res) => {
            this.nodeList = res.result
          })
          .catch((error) => {
          })
    },
    edit(row) {
      this.modalTitle = '编辑案件信息'
      this.showOrHide();
      this.getNodeList(row);
      this.formInfo = row
      this.b01DataList = [{b0101: row.b0101, b0102: row.b0102}]
      this.b01 = {key: row.b0101, label: row.b0102}
    },
    columnChange() {
      this.$refs.tableList.refreshColumn();
    },
    remind(row) {
      this.$http
          .post(remind, {h0101: row.h0101})
          .then((res) => {
            modal.info({title: '成功提示', content: '提醒成功'});
          })
          .catch((error) => {
          })

    },
    filterH0116Method({ option, row }) {
      return row.h0116.includes(option.data);
    },
    filterB0122Method({ option, row }) {
      return row.b0122Name.includes(option.data);
    },
  },
};
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;


  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }
  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;

    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;

      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;

        ul {
          padding: 10px;

          li {
            padding: 1px 0;
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;

          p {
            flex: 1;
            text-align: center;
            cursor: pointer;

            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }

  .ep-table {
    height: calc(100% - 60px);
  }
}

// /*表格 筛选-输入框*/
// ::v-deep .vxe-table--filter-wrapper {
//   input {
//     background: #002a44;
//     padding-left: 6px;
//     line-height: 32px;
//     box-shadow: none !important;
//     border: none !important;
//   }
// }
</style>
